<template>
	<view>
		<!-- 搜索组件 -->
		<!-- <my-search  @click="toSearch"></my-search> -->
		<view class="goods-list" v-if="goodsList.length">
			<view class="good-item" v-for="item in goodsList" :key="item._id" >
				<image :src="item.imgUrl" class="good-pic" @click="toGoodsDetail(item._id)"></image>
				<view class="title" @click="toGoodsDetail(item._id)">
					{{item.name}}
				</view>

				<view class="price">
					￥{{item.price}}
				</view>
				<view class="to-buy" @click="toBuy(item)">
					立即购买
				</view>
			</view>
		</view>
		
		<view class="no-list" v-if="!goodsList.length">
			未检索到数据
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				goodsList: []
			};
		},
		onLoad(option) {
			console.log(option)
			if (option.query) {
				this.getGoodsByKeyWords(option.query)
				console.log(111)
			} else {
				console.log(222)
				this.getGoodsList(option.id)
			}
		},
		methods: {
			// 立即购买
			async toBuy(item) {
				console.log(item)
				// 先判断是否登录
				// 1.登录情况下  加入购物车，并导航到购物车页面 
				if(JSON.stringify(this.userInfo)!=='{}'){
					const {
						data: res
					} = await uni.$http.post('/cart/addCart', {
						userId: this.userInfo._id,
						productId: item._id,
						num: '1'
					})
					if (res.success == '0') {
						this.cartNum++
						uni.switchTab({
							url:'/pages/cart/cart'
						})
						return
					}
					// 未登录情况：导航到登录页  登陆后在导航回去
				}else{
					let redirect = '/subpkg/goods-list/goods-list';
					uni.navigateTo({
						url:'/subpkg/login/login'
					})
					uni.setStorageSync('redirect', redirect)
				}
			},

			// 根据关键字搜索商品
			async getGoodsByKeyWords(kw){
				const {data:res}=await uni.$http.post('/product/searchProduct',{
					name:kw,
					offset:1,
					limit:10
				})
				console.log(res.data.list)
				this.goodsList=res.data.list
			},

			// 从二级分类点击获取商品列表
			async getGoodsList(id) {
				const {
					data: res
				} = await uni.$http.post('/product/getProductByType', {
					secondType: id,
					offset: 1,
					limit: 9
				})
				console.log(res.data.list)
				this.goodsList = res.data.list
			},
			// 跳转到搜索页面
			toSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			// 查看商品详情
			toGoodsDetail(id) {
				uni.navigateTo({
					url: '/subpkg/goods-detail/goods-detail?id=' + id
				})
			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.goods-list{
		padding: 0 25rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.good-item {
		margin-top: 45rpx;
		height: 500rpx;
		width: 342rpx;
		text-align: center;

		.good-pic {
			width: 342rpx;
			height: 342rpx;
		}

		.title {
			height: 75rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			// line-height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		.price {
			font-size: 30rpx;
			font-weight: 400;
			color: #FF1111;
		}

		.to-buy {
			width: 130rpx;
			height: 38rpx;
			line-height: 38rpx;
			text-align: center;
			background: #E60505;
			border-radius: 19rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin: auto;
		}
	}
	.no-list{
		padding: 0 25rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		color: #C0C0C0;
	} 
</style>
